<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$system_name}</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
  <link rel="canonical" href="http://www.example.com/">
  -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/select_city.css">
    <!--<link rel="stylesheet" href="__PUBLIC__/assets/css/index.css">-->
    <!--必要样式-->
    <style>
        body {
            background: #333;
            color: #FFF;
            font-size: 15px;
        }

        input[type=text] {
            background: #333;
            border: none;
            border-bottom: 1px solid #FFF;
            /*line-height: 20px;*/
            width: 100%;
            font-size: 13px;
            margin-top: 2px;
            padding: 10px 0 5px;
            text-align: center;
        }

        .info-wrap {
            padding: 0px 30px 0 30px;
        }

        .info-wrap .am-g {
            margin-bottom: 10px;
        }

        .info-wrap-item span {
            line-height: 40px;text-align: left;
        }

        .preduct label {
            cursor: pointer;
            padding-left: 16px;
            line-height: 13px;
            margin-top: 13px;
            margin-left: -2px;
            font-weight: 100;
            background: url(__PUBLIC__/assets/i/circle.png) no-repeat;
            background-size: 12px;

        }

        input[type="radio"] {
            margin: 5px 5px 0px 5px;
            display: none;
        }

        input{
            border-radius: 0;
        }

        .radio-label:checked + label {
            background: url(__PUBLIC__/assets/i/draw.png) no-repeat;
            background-size: 12px;
        }

        .code-btn {
            color: #F6DB7F;
            font-size: 10px;
            display: inline-block;
            width: 100%;
            border: 1px solid #F6DB7F;
            text-align: center;
            border-radius: 5px;
            margin-top: 8px;
            background: #333;
            line-height: 22px;
            padding: 0;
            margin-left: 5px;
        }

        .code-btn[disabled=disabled] {
            color: #999;
            border-color: #999;
        }
        .submit-btn{
            color: #F6DB7F;
            line-height: 36px;
            border: 1px solid #F6DB7F;
            border-radius: 5px;
            background: #333;
            font-size:18px;
            width: 115px;
        }
        .note{
            font-size: 12px;
            color: #FF1D1D;
        }
        .am-dropdown-content{
            color:#333;
        }
        .am-selected-btn{
            width: auto;
        }
        .am-selected-btn.am-btn-default{
            background-color: #FFF;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default">
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            <empty name="user.phone">
                 完善参赛资料
                <else/>设置参赛资料
            </empty>

        </a>
    </h1>
</header>
<!--头像-->
<div class="am-g">
    <div class="am-u-sm-12 am-text-center am-margin-vertical-sm">
        <img src="{$user.head_url}" class="am-round" alt="" width="90" height="90"><br>
        <eq name="user.sex" value="0">
            <img src="__PUBLIC__/assets/i/boy.png" width="24" alt="" style="margin-top: 5px">
            <else/><img src="__PUBLIC__/assets/i/girl.png" width="24" style="margin-top: 5px" alt="">
        </eq>
    </div>
</div>
<!--信息资料-->
<form id="settings_form">
    <div class=" info-wrap">
        <div class="am-g">
            <div class="am-u-sm-4 am-padding-0  am-text-right info-wrap-item">
                <span>游戏昵称：</span>
            </div>
            <div class="am-u-sm-8  ">
                <input type="text" name="game_name" value="{$user.game_name}" placeholder="游戏昵称">
            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-4 am-padding-0 am-text-right info-wrap-item">
                <span>微&nbsp;&nbsp;信&nbsp;&nbsp;号：</span>
            </div>
            <div class="am-u-sm-8  ">
                <input type="text" name="wechat_number" value="{$user.wechat_number}" placeholder="微信号">
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-4 am-padding-0 am-text-right info-wrap-item">
                <span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区：</span>
            </div>
            <div class="am-u-sm-8  ">
                <input type="text" class="select-value" value="{$user.region_name}" name="region_name" placeholder="地区">
            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-4 am-padding-0 am-text-right info-wrap-item">
                <span>游戏战区：</span>
            </div>
            <div class="am-u-sm-8  preduct ">
                <input type="radio" id="area_wx" value="1"  name="region" class=" radio-label" checked>
                <label class="staff"  for="area_wx">微信区</label>

            </div>
            <!--<eq name="user.region" value="1">-->
            <!---->
            <!--<div class="am-u-sm-4 preduct ">-->
                <!--<input type="radio" value="0" id="area_qq" name="region" class=" radio-label">-->
                <!--<label class="staff"  for="area_qq">QQ区</label>-->
            <!--</div>-->
            <!--<else/>-->
                <!--<div class="am-u-sm-4 am-padding-right-0 preduct ">-->
                    <!--<input type="radio" id="area_wx1" value="1"  name="region" class=" radio-label">-->
                    <!--<label class="staff"  for="area_wx1">微信区</label>-->

                <!--</div>-->
                <!--<div class="am-u-sm-4 preduct ">-->
                    <!--<input type="radio" value="0" id="area_qq1" name="region" class=" radio-label" checked>-->
                    <!--<label class="staff"  for="area_qq1">QQ区</label>-->
                <!--</div>-->
            <!--</eq>-->
        </div>
        <input type="hidden" name="systems_name" value="1">
        <div class="am-g">
            <div class="am-u-sm-4 am-padding-0 am-text-right info-wrap-item">
                <span>当前段位：</span>
            </div>
            <div class="am-u-sm-4">
                <select name="level" id="level" data-am-selected="">
                    <switch name="user.level">
                        <case value="0">
                            <option value="" selected>请选择当前段位</option>
                            <option value="1">青铜</option>
                            <option value="2">白银</option>
                            <option value="3">黄金</option>
                            <option value="4">铂金</option>
                            <option value="5">钻石</option>
                            <option value="6">星耀</option>
                            <option value="7">王者</option>
                        </case>
                        <case value="1">
                            <option value="" >请选择当前段位</option>
                            <option value="1" selected>青铜</option>
                            <option value="2">白银</option>
                            <option value="3">黄金</option>
                            <option value="4">铂金</option>
                            <option value="5">钻石</option>
                            <option value="6">星耀</option>
                            <option value="7">王者</option>
                        </case>
                        <case value="2">
                            <option value="" >请选择当前段位</option>
                            <option value="1">青铜</option>
                            <option value="2" selected>白银</option>
                            <option value="3">黄金</option>
                            <option value="4">铂金</option>
                            <option value="5">钻石</option>
                            <option value="6">星耀</option>
                            <option value="7">王者</option>
                        </case>
                        <case value="3">
                            <option value="" >请选择当前段位</option>
                            <option value="1">青铜</option>
                            <option value="2">白银</option>
                            <option value="3" selected>黄金</option>
                            <option value="4">铂金</option>
                            <option value="5">钻石</option>
                            <option value="6">星耀</option>
                            <option value="7">王者</option>
                        </case>
                        <case value="4">
                            <option value="" >请选择当前段位</option>
                            <option value="1">青铜</option>
                            <option value="2">白银</option>
                            <option value="3">黄金</option>
                            <option value="4" selected>铂金</option>
                            <option value="5">钻石</option>
                            <option value="6">星耀</option>
                            <option value="7">王者</option>
                        </case>
                        <case value="5">
                            <option value="" >请选择当前段位</option>
                            <option value="1">青铜</option>
                            <option value="2">白银</option>
                            <option value="3">黄金</option>
                            <option value="4">铂金</option>
                            <option value="5" selected>钻石</option>
                            <option value="6">星耀</option>
                            <option value="7">王者</option>
                        </case>
                        <case value="6">
                            <option value="">请选择当前段位</option>
                            <option value="1">青铜</option>
                            <option value="2">白银</option>
                            <option value="3">黄金</option>
                            <option value="4">铂金</option>
                            <option value="5">钻石</option>
                            <option value="6" selected>星耀</option>
                            <option value="7">王者</option>
                        </case>
                        <case value="7">
                            <option value="">请选择当前段位</option>
                            <option value="1">青铜</option>
                            <option value="2">白银</option>
                            <option value="3">黄金</option>
                            <option value="4">铂金</option>
                            <option value="5">钻石</option>
                            <option value="6">星耀</option>
                            <option value="7" selected>王者</option>
                        </case>
                        <default/>
                        <option value="" selected>请选择当前段位</option>
                        <option value="1">青铜</option>
                        <option value="2">白银</option>
                        <option value="3">黄金</option>
                        <option value="4">铂金</option>
                        <option value="5">钻石</option>
                        <option value="6">星耀</option>
                        <option value="7">王者</option>
                    </switch>

                </select>
            </div>
            <div class="am-u-sm-4">

            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-4 am-padding-0 am-text-right info-wrap-item">
                <span>手&nbsp;&nbsp;机&nbsp;&nbsp;号：</span>
            </div>
            <div class="am-u-sm-5  am-padding-right-0">
                <input type="text" name="phone" id="phone" placeholder="手机号" value="{$user.phone}" maxlength="11" style="text-align: center">
            </div>
            <div class="am-u-sm-3 am-padding-0 ">
                <button class="code-btn" id="code" type="button" onclick="getCode(this,true)">获取验证码</button>
            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-4 am-padding-0 am-text-right info-wrap-item">
                <span>验&nbsp;&nbsp;证&nbsp;&nbsp;码：</span>
            </div>
            <div class="am-u-sm-8  ">
                <input type="text" name="code">
            </div>
        </div>
        <empty name="user.phone">
            <div class="am-g">
                <div class="am-u-sm-12 am-text-center am-margin-top-sm">
                    <input type="button" value="报名" onclick="setUserInfo()" class="submit-btn">
                </div>
            </div>
            <else/>
            <div class="am-g">
                <div class="am-u-sm-12 am-text-center am-margin-top-sm">
                    <input type="button" value="修改" onclick="setUserInfo()" class="submit-btn">
                </div>
            </div>
        </empty>

        <notempty name="integral">
            <div class="am-g">
                <div class="am-u-sm-12">
                    <span class="note">*新用户注册可获得{$integral}钻石</span>
                </div>
            </div>
        </notempty>

    </div>
</form>


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/angular.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/layer/layer.js"></script>
<script src="__PUBLIC__/assets/js/select_city.js"></script>
<script type="text/javascript">
    function isPhoneNo(phone) {
        var pattern = /^1[34578]\d{9}$/;
        return pattern.test(phone);
    }
//    $('#phone').blur(function () {
//        console.log();
//
////        if (!isPhoneNo($(this).val())) {
////            layer.msg('手机号有误,请重新输入');
////        }
//    });

    function setUserInfo(){
        $.ajax({
            url:"__APP__/Home/Index/ajaxSetUserInfo",
            type:"post",
            dataType: "json",
//                processData: false,
//                contentType: false,
            data:$('#settings_form').serialize(),
            success: function(data){
                console.info(data);
                if(data.success) {
                    var phone = '{$user.phone}';
                    if(phone == ''){
                        window.location.href = '__APP__/Home/Index/';
                    }else{
                        layer.msg(data.message,{type:1,time:1000},function() {
                            window.location.href = '__APP__/Home/Me/';
                        });
                    }
                }else{
                    layer.msg(data.message);
                }
//
            },
            error:function (data) {
                layer.msg('服务器繁忙！',{type:1,time:1000},function(){
//                        location.reload();
                });
            }
        });
    }


    var countdown = 60;
    function getCode(obj,isSend) {
        var phone = $('#phone').val();
        if(phone == ''){
            layer.msg('手机号有误,请重新输入');
            return;
        }
        if(isSend) {
            var success = false;
            $.ajax({
                type: "POST",
                url: "__APP__/Home/index/getCode",
                async: false,
                dataType: "json",
                data: {
                    phone: phone
                },
                success: function (data) {
                    console.info(data);
                    layer.msg(data.message);
                    success = data.success;
                },
                error: function (data) {
                    console.info(data);
                }
            });
            if(!success){
                return;
            }
        }
        if (countdown == 0) {
            $(obj).attr("disabled", false);
            $(obj).html("获取验证码");
            countdown = 60;
            return;
        } else {
            $(obj).attr("disabled", true);

            $(obj).html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
            getCode(obj,false)
        }, 1000);
    }
</script>
</body>
</html>

